import { useState } from 'react';
import apiClient from '../api/axios';
import { useAuth } from '../context/AuthContext';

function RagSearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const { token } = useAuth();

  const handleSearch = async (e) => {
    e.preventDefault();
    if (!query.trim()) return;
    
    setLoading(true);
    setError('');
    setResults([]);
    
    try {
      const response = await apiClient.post('/rag/search', { query });
      setResults(response.data);
    } catch (err) {
      console.error('搜索失败:', err);
      setError('搜索失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ 
      maxWidth: '800px', 
      margin: '20px auto', 
      padding: '20px',
      backgroundColor: '#fff',
      borderRadius: '8px',
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
    }}>
      <h1 style={{ 
        textAlign: 'center', 
        marginBottom: '30px',
        color: '#333'
      }}>
        🔍 RAG知识检索
      </h1>
      
      <form onSubmit={handleSearch} style={{ 
        display: 'flex', 
        marginBottom: '30px',
        gap: '10px'
      }}>
        <input 
          type="text" 
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="请输入您的问题..."
          style={{ 
            flex: 1,
            padding: '12px', 
            border: '1px solid #ddd', 
            borderRadius: '4px',
            fontSize: '16px'
          }}
          disabled={loading}
        />
        <button 
          type="submit" 
          style={{ 
            padding: '12px 24px', 
            backgroundColor: '#007bff', 
            color: 'white', 
            border: 'none', 
            borderRadius: '4px', 
            cursor: 'pointer',
            fontSize: '16px',
            fontWeight: 'bold',
            disabled: loading
          }}
          disabled={loading}
        >
          {loading ? '搜索中...' : '搜索'}
        </button>
      </form>
      
      {error && (
        <div style={{ 
          padding: '12px',
          backgroundColor: '#f8d7da',
          color: '#721c24',
          border: '1px solid #f5c6cb',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          ❌ {error}
        </div>
      )}
      
      <div>
        <h2>搜索结果</h2>
        {results.length === 0 ? (
          <p style={{ textAlign: 'center', color: '#666' }}>
            {query ? '未找到相关结果' : '请输入问题开始搜索'}
          </p>
        ) : (
          <div style={{ 
            display: 'grid', 
            gap: '20px' 
          }}>
            {results.map((result, index) => (
              <div 
                key={index} 
                style={{ 
                  padding: '15px', 
                  border: '1px solid #eee', 
                  borderRadius: '4px',
                  backgroundColor: '#f9f9f9'
                }}
              >
                <h3 style={{ 
                  marginTop: 0,
                  color: '#333'
                }}>
                  相关知识点 {index + 1}
                </h3>
                <p style={{ 
                  color: '#555',
                  lineHeight: '1.6'
                }}>
                  {result.pageContent}
                </p>
                {result.metadata && result.metadata.knowledgePointId && (
                  <p style={{ 
                    fontSize: '14px',
                    color: '#888'
                  }}>
                    知识点ID: {result.metadata.knowledgePointId}
                  </p>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default RagSearchPage;